<template>
  <div class="TableClass" ref="tableRef">
    <a-table
        :columns="columnsData"
        :data="tableData"
        :pagination="false"
        :scroll="{x: '100%', y: '100%'}"
        scrollbar
    >
      <template
          v-for="(item, key, i) in slots"
          :key="i"
          v-slot:[key]="{ record, rowIndex, column }"
      >
        <slot
            :name="key"
            v-bind="{ rowIndex: rowIndex, record: record, column: column }"
        ></slot>
      </template>
      <template #operator="{ record }">
        <a-space size="small">
          <div v-if="operatorBeforeArrs && operatorBeforeArrs.length ==0 ">
            <a-link
                v-for="(item,idx) in  operatorBeforeArrs"
                :key="idx"
                :type="item.type || 'primary'"
                @click="handlerOperator(record,item)"
            >{{item.label}}</a-link>
          </div>
          <div v-else>
            <a-space size="small">
              <a-link
                  v-for="(item,idx) in  operatorBeforeArrs"
                  :key="idx"
                  :type="item.type || 'primary'"
                  @click="handlerOperator(record,item)"
              >{{item.label}}</a-link>
              <a-dropdown trigger="hover" position="bottom">
                <a-link type="primary">{{operatorMore.label}}</a-link>
                <template #content>
                  <a-doption
                      v-for="(item,idx) in  operatorAfterArrs"
                      :key="idx"
                      :type="item.type || 'primary'"
                      @click="handlerOperator(record,item)"
                  >{{item.label}}</a-doption>
                </template>
              </a-dropdown>
            </a-space>
          </div>
        </a-space>
      </template>
    </a-table>
    <!-- <a-pagination
        class="PaginationClass"
        v-show="showPagination"
        :total="pageTotal"
        :page-size-options="pageSizeOptions"
        show-total
        show-jumper
        show-page-size
        @change="handlerPaginationChange('num', $event)"
        @page-size-change="handlerPaginationChange('size', $event)"
    /> -->
  </div>
</template>

<script lang="ts" setup>
import { defineEmits, ref, useSlots, type PropType } from 'vue';
const tableRef = ref();
const props = defineProps({
  //表格数据
   tableData: {
     type: Array as PropType<any[]>,
     default: () => [],
     required: true
   },
  //表格头部数据
  columnsData: {
    type: Array as PropType<any[]>,
    default: () => [],
    required: true
  },
  //是否显示分页信息
  showPagination: {
    type: Boolean as PropType<boolean>,
    default: true
  },
 //操作按钮
  operatorData: {
    type: Array as PropType<any[]>,
    default: () => [],
    required: false
  },
  //表格滚动
  scroll: {
    type: Object,
    default: () => ({x: '100%', y: '100%'})
  },
  //按钮折叠数量
  operatorCollapse: {
    type: Number,
    default: 3
  },
  //分页大小
  pageTotal: {
    type: Number,
    default: 0
  },
  pageSizeOptions: {
    type: Array as PropType<number[]>,
    default: () => [10, 20]
  }
});
const emits = defineEmits(['handlerOperator','handlerPaginationChange']);

 //获取父亲组件传递过来的插槽 特殊处理数据
const slots = useSlots();
//控制滚动条
const scrollbar = ref(true);


//控制按钮数量显示
const operatorBeforeArrs = ref<any[]>([]);
const operatorAfterArrs = ref<any[]>([]);
const operatorMore = ref({});
const operatorData = ref(props.operatorData);
const operatorDataLength = operatorData.value.length;
if (operatorDataLength > props.operatorCollapse) {
  operatorBeforeArrs.value = operatorData.value.slice(0, 3);
  operatorMore.value = {  label: '更多...',code: 'more'};
  operatorAfterArrs.value = operatorData.value.slice(3);
}else {
  operatorBeforeArrs.value = operatorData.value;
}


/**
 *
 * @method handlerOperator 所有的操作按钮
 * @param record 当前行的数据
 * @param item 当前操作按钮的数据
 */
function handlerOperator(record: any, item: any) {
  emits('handlerOperator', record, item);
}
/**
 *
 * @method handlerPaginationChange 分页信息
 * @param type 当前操作按钮的数据
 * @param value 当前操作按钮的数据
 */
function handlerPaginationChange(type: string, value: any) {
  emits('handlerPaginationChange', type, value);
}

</script>

<style lang="less" scoped>
.TableClass{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.PaginationClass{
  margin-top: 15px;
}
::v-deep{
  .arco-link{
    color: #1459FA;
  }
  .arco-dropdown-option-active, .arco-dropdown-option:not(.arco-dropdown-option-disabled):hover{
    // background-color: #E5EFFE;
    background-color: red;
  }
}
</style>
